<template>
  <div v-if="showFrame">
    <template v-for="frame in getFramePages" :key="frame.path">
      <FramePage v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)" v-show="showIframe(frame)" :frameSrc="frame.meta.frameSrc" />
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, computed } from 'vue';
  import FramePage from '/@/views/sys/iframe/index.vue';

  import { useFrameKeepAlive } from './useFrameKeepAlive';

  export default defineComponent({
    name: 'FrameLayout',
    components: { FramePage },
    setup() {
      const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();

      const showFrame = computed(() => unref(getFramePages).length > 0);

      console.log(getFramePages.value)

      for(let i in getFramePages.value){
        if(!getFramePages?.value[i]?.meta?.frameSrc){
          continue;
        }
        let storage = window.localStorage;
        let userid = storage.getItem("useridforpay");
        console.log(userid);
        let temp =getFramePages.value[i];
         temp.meta.frameSrc =temp.meta.frameSrc+ "&useridforpay="+userid;
        console.log(temp);
        getFramePages.value[i] = temp;
      }

      return { getFramePages, hasRenderFrame, showIframe, showFrame };
    },
  });
</script>
